<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="代码演练场">
		<title>代码演练场</title>
		<link rel="stylesheet" href="css/split.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/header.css">
		<link rel="stylesheet" href="css/dropdown.css">
		<link rel="stylesheet" href="css/default.css">
		<link rel="stylesheet" href="css/dark-skin.css">
		<link rel="stylesheet" href="vendor/highlight/chrome.css">
		<link rel="stylesheet" href="vendor/highlight/monokai.css">

		<script defer src="vendor/emmet/emmet.min.js"></script>
		<script defer type="text/javascript" src="js/split.js"></script>
		<script defer src="libs/highlight.min.js"></script>
		<script defer src="hlibs/marked.min.js"></script>
		<script defer src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
		<script defer src="libs/ext-beautify.js"></script>
		<script defer src="libs/ext-emmet.js"></script>
		<script defer src="libs/ext-language_tools.js"></script>
		<script defer src="libs/srcdoc-polyfill.min.js"></script>

		<script src="js/app.js"></script>
		<script src="js/util.js"></script>
		<script src="js/config.js"></script>
		<script src="js/setup.js"></script>
		<script src="js/services.js"></script>
		<script src="js/listeners.js"></script>
		<script src="js/modules.js"></script>
		</script>
	</head>

	<body class="full">
		<base target="_blank">
		<header>
			<nav id="h2">
				<div class="title">
					<span id="flash">前端开发</span>
					<span id="light">代码演练场</span>
				</div>
			</nav>
			<div id="h3" class="clearfix">
				<div id="toolbar">
					<button id="preview-button" class="toolbar-button">
						<span class="label" i18n content="预览栏"></span>
					</button>
					<button id="task-button" class="toolbar-button">
						<span class="label" i18n content="任务栏"></span>
					</button>
					<button id="theme-button" class="toolbar-button">
						<span class="label" i18n content="主题切换"></span>
					</button>
				</div>

				<!-- menu - dropdown - frameworks - tuts -->
				<label id="modules">
					<div class="select clearfix">
						<span class="select-thumbnail"></span>
						<span class="select-item" i18n content="Select Template"></span>
						<span class="select-arrow"></span>
					</div>

					<input type="checkbox">

					<div class="menu">
						<div class="menu-mask"></div>

						<div class="menu-container">
							<label class="menu-search">
								<input id="search-input" type="search"
									placeholder="Filter by space-separated keywords (e.g. page push)" autocomplete="on">
							</label>

							<ul class="menu-list">
								<li class="framework-item">
									<input type="radio" id="r-html" name="framework">
									<label for="r-html" framework="html">
										HTML
									</label>
									<ul class="module-list"></ul>
								</li>
								<li class="framework-item">
									<input type="radio" id="r-css" name="framework" checked>
									<label for="r-css" framework="css">
										CSS
									</label>
									<ul class="module-list"></ul>
								</li>
								<li class="framework-item">
									<input type="radio" id="r-js" name="framework" checked>
									<label for="r-js" framework="js">
										JavaScript
									</label>
									<ul class="module-list"></ul>
								</li>
							</ul>
						</div>

					</div>
				</label>
			</div>
		</header>
		<div id="container">
			<div id="leftPane" class="split split-horizontal content">
				<div id="tutorial-content" class="frame">
					<h2>开始演练</h2>
					<p class="title">任务栏</p>
					<p>欢迎使用前端开发代码演练场！</p>

				</div>
				<div id="tutorial-pages">
					<span id="pages-previous">◀</span>
					<span id="pages-current">1</span>
					/
					<span id="pages-total">1</span>
					<span id="pages-next">▶</span>
				</div>
			</div>

			<div id="rightPane" class="split split-horizontal content">
				<div id="rightTopPane" class="split content">
					<div class="editor-title">HTML</div>
					<div id="html-input" class="frame input"></div>
				</div>
				<div id="rightMiddlePane" class="split content">
					<div class="editor-title">CSS</div>
					<div id="css-input" class="frame input"></div>
				</div>
				<div id="rightBottomPane" class="split content">
					<div class="editor-title">JS</div>
					<div id="js-input" class="frame input"></div>
				</div>
			</div>

			<div id="previewPane" class="split split-horizontal frame content">
				<p class="title">预览栏</p>
				<div id="output">
					<iframe frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
				</div>
			</div>
		</div>
	</body>
</html>